/**
*@description 粉丝地域
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { browserHistory } from 'dva/router';
import styles from '../../routes/BusinessData.less';
import ReactEcharts from 'echarts-for-react';
import toExcel from '../../utils/toExcel';
import downImg from '../../utils/downImg';
import {Card, Icon, Tooltip, Row, Col} from 'antd';


const DataTitle = ({data, dispatch,loading }) => {
  let option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            color:['#606d7a','#ceb180'],
            series : [
                {
                    name: '微信粉丝手机注册状况分布',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:data.register_phone, name:'注册过手机号'},
                        {value:data.unregister_phone, name:'未注册手机号'},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
  function exExcel(){
    var title = ['是否注册手机号','数量','占比'];
    var datas = [
                    ['注册过手机号',data.register_phone,data.registepct],
                    ['未注册手机号',data.unregister_phone,data.unregisterpct]
                ];
    if(datas == '')  
        return;  
    toExcel(title, "微信粉丝手机注册状况分布", datas);
  }

  let tit = (<div><p>（1）    注册过手机号：截止至昨日，蜜丝佛陀官方微信账号下的粉丝中注册绑定过手机号的人数。</p>
                  <p>（2）    未注册手机号：截止至昨日，蜜丝佛陀官方微信账号下的粉丝中未注册绑定过手机号的人数</p></div>)

  return (
    <div className={styles.box}>
            <h3>微信粉丝手机注册状况分布&nbsp;
                    <Tooltip placement="right" title={tit}>
                      <Icon type="question-circle-o" className={styles.anticon}/>
                    </Tooltip></h3>
            <div className={styles.box_wrap}>
              <div className={styles.downloads}>
                  <span className={styles.dimg} onClick={downImg.bind(this,'charts','微信粉丝手机注册状况分布')}></span>
                  <span className={styles.desl} onClick={exExcel.bind(this)}></span>
              </div>
            <div className={styles.chart_left} id="charts">
               <ReactEcharts
                option={option} 
                height={300} 
                showLoading={loading}
                />
            </div>
            <div className={styles.chart_right}>
              <table className={styles.chart_tab} style={{margin:"50px 0px 0px 50px"}}>
                    <tbody>
                <tr>
                  <td>是否注册手机号</td>
                  <td>数量</td>
                  <td>占比</td>
                </tr>
                <tr>
                  <td>注册过手机号</td>
                  <td className={styles.tdright}>{parseInt(data.register_phone).formatMoney()}</td>
                  <td className={styles.tdright}>{data.registepct}%</td>
                </tr>
                <tr>
                  <td>未注册手机号</td>
                  <td className={styles.tdright}>{parseInt(data.unregister_phone).formatMoney()}</td>
                  <td className={styles.tdright}>{data.unregisterpct}%</td>
                </tr>
                        </tbody>
              </table>
            </div>
            </div>
          </div>
  );
};

DataTitle.propTypes = {
    // data: PropTypes.array
};

export default connect()(DataTitle);